{% extends 'base.html' %}

{% block title %}
预约成功
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-success text-white text-center">
                    <h2>预约成功</h2>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h4>预约详情</h4>
                            <p><strong>订单号:</strong> {{ booking.order_number }}</p>
                            <p><strong>赛事名称:</strong> {{ event.name }}</p>
                            <p><strong>预约人:</strong> {{ booking.name }}</p>
                            <p><strong>手机号:</strong> {{ booking.phone }}</p>
                            <p><strong>证件类型:</strong> {{ booking.id_type }}</p>
                            <p><strong>证件号码:</strong> {{ booking.id_number }}</p>
                            <p><strong>预约日期:</strong> {{ booking.booking_date.strftime('%Y-%m-%d') }}</p>
                            <p><strong>预约时间:</strong> {{ booking.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</p>
                        </div>
                        <div class="col-md-6 text-center">
                            <h4>核销二维码</h4>
                            <img src="data:image/png;base64,{{ qr_code }}" alt="二维码" class="img-fluid mx-auto" style="max-width: 200px;">
                            <p class="mt-3 text-muted">请保存二维码，入场时出示</p>
                        </div>
                    </div>
                    <div class="text-center mt-5">
                        <a href="{{ url_for('index') }}" class="btn btn-primary">返回首页</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}